<template>
  <div>
    <Card dis-hover :bordered="false" class="ivu-mt">
    <Form label-position="top">
      <FormItem label="模块">
        <Select v-model="modular" v-width="150">
          <Option value="患者">患者</Option>
          <Option value="导医">导医</Option>
          <Option value="消费">消费</Option>
          <Option value="治疗">治疗</Option>
          <Option value="治疗">回访</Option>
        </Select>
      </FormItem>
       <FormItem label="字段信息">
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            @click.prevent.native="handleCheckAll">全选</Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label="姓名"></Checkbox>
        <Checkbox label="性别"></Checkbox>
         <Checkbox label="年龄"></Checkbox>
        <Checkbox label="归属人"></Checkbox>
        <Checkbox label="诊疗号"></Checkbox>
        <Checkbox label="手机号"></Checkbox>
        <Checkbox label="来源渠道"></Checkbox>
        <Checkbox label="病种"></Checkbox>
        <Checkbox label="挂号时间"></Checkbox>
        <Checkbox label="城市"></Checkbox>
    </CheckboxGroup>
      </FormItem>
    </Form>
      <Form>
        <div class="ivu-mb-8">筛选条件</div>
      <FormItem v-for="(item,index) in formDynamic.items"
      v-if="item.status" :key="index" :prop ="'item.'+ index + '.value'"
      >
        <Select v-width="150" placeholder="请选择">
          <Option v-for="item in formDynamic.fieldList" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>
          <Select v-width="150" class="ivu-ml-8"  placeholder="请选择">
          <Option v-for="item in formDynamic.countList" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>
          <Select v-width="150" class="ivu-ml-8" >
          <Option v-for="item in formDynamic.personList" :key="item.value" :value="item.value">{{item.label}}</Option>
        </Select>
        <Button type="default" class="ivu-ml-8" @click="handleRemove(index)" >删除</Button>
      </FormItem>
      <FormItem>
        <Button type="dashed" icon="md-add" @click="handleAdd" >新增</Button>
      </FormItem>
      <Button type="primary" size="large" @click="hadnleExport" class="ivu-mt-16">开始导出</Button>
    </Form>
    </Card>
    <Modal v-model="exportModal" title="数据导出" footer-hide :mask-closable="false">
      <p>数据正在导出，<b color="ivu-warning" class="ivu-mr-8 ivu-text-warning">10</b>秒后页面将跳转至数据导出日志页面</p>
    </Modal>
  </div>
</template>
<script>
    export default {
        data () {
            return {
                modular: '患者',
                indeterminate: true,
                checkAll: false,
                checkAllGroup: ['姓名', '性别'],
                index: 1,
                exportModal: false,
                formDynamic: {
                    items: [
                        {
                            value: '',
                            index: 1,
                            status: 1
                        }
                    ],
                    fieldList: [
                        {
                            value: '姓名',
                            label: '姓名'
                        },
                        {
                            value: '性别',
                            label: '性别'
                        },
                        {
                            value: '年龄',
                            label: '年龄'
                        },
                        {
                            value: '归属人',
                            label: '归属人'
                        },
                        {
                            value: '挂号时间',
                            label: '挂号时间'
                        },
                        {
                            value: '城市',
                            label: '城市'
                        }
                    ],
                    countList: [
                        {
                            value: '等于',
                            label: '等于'
                        },
                        {
                            value: '不等于',
                            label: '不等于'
                        },
                        {
                            value: '大于等于',
                            label: '大于等于'
                        },
                        {
                            value: '小于等于',
                            label: '小于等于'
                        }
                    ],
                    personList: [
                        {
                            value: '高玲',
                            label: '高玲'
                        },
                        {
                            value: '王艳',
                            label: '王艳'
                        },
                        {
                            value: '张在峰',
                            label: '张在峰'
                        }
                    ]
                }
            }
        },
        methods: {
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;
                if (this.checkAll) {
                    this.checkAllGroup = ['姓名', '性别', '年龄', '归属人', '诊疗号', '手机号', '来源渠道', '病种', '挂号时间', '城市'];
                } else {
                    this.checkAllGroup = [];
                }
            },
            checkAllGroupChange (data) {
                if (data.length === 10) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            },
            hadnleExport () {
                this.exportModal = true
            },
            handleAdd () {
                this.index++;
                this.formDynamic.items.push({
                    value: '',
                    index: this.index,
                    status: 1
                });
            },
            handleRemove (index) {
                this.formDynamic.items[index].status = 0;
            }
        }
    }
</script>
<style scoped>
  .ivu-text-warning {
    color:#ff9900;
    font-size:16px;
  }
</style>
